<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Docs | a11y.css</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description"
          content="This CSS file intends to warn developers about possible risks and mistakes that exist in HTML code. It can also be used to roughly evaluate a site's quality by simply including it as an external stylesheet.">
    <link rel="stylesheet" href="./static/docs.css?v=1690620346342">
    <link rel="shortcut icon" href="https://ffoodd.github.io/a11y.css/static/favicon.ico">
    <link rel="preload" href="./static/fonts/firasans-book.woff2" as="font" type="font/woff2" crossorigin="anonymous">
    <link rel="stylesheet" href="./static/css/a11y-light.min.css">
</head>
  <body>
    <div class="sr-only-focusable" id="skip-links">
      <a href="#toc">Skip to table of content</a>
      <a href="#content">Skip to content</a>
    </div>
    <header role="banner" id="top" tabindex="-1">
  <a href="." id="logo">
    <svg xmlns="http://www.w3.org/2000/svg" width="90" height="89.905" viewBox="0 0 180 179.81" role="img" aria-labelledby="titre">
      <title id="titre">a11y.css</title>
      <path fill="#ffce00" d="M0 8a8 8 0 0 1 8-8h164a8 8 0 0 1 8 8v163.81a8 8 0 0 1-8 8H8a8 8 0 0 1-8-8V8z"/>
      <path fill="currentColor" d="M80.83 36.9a10 10 0 0 1 5.06-7.18 7.43 7.43 0 0 1 8.53 1.53 8.76 8.76 0 0 1 2.91 6.18c0 4.71.09 64.9 0 68.32a10.42 10.42 0 0 1-1.77 5.83 8 8 0 0 1-8 3.23c-4-.86-6.63-4.74-6.75-8.71s-.01-69.07.02-69.2zM27 120.87c6-4.4 11.77-9.09 17.83-13.4-4-3.22-7.94-6.52-12.17-9.39-3.62-2.46-8.14-5.36-7-10.42a5.86 5.86 0 0 1 3.8-4.43 7.07 7.07 0 0 1 6.19 1.41c2.23 1.7 22.88 17.71 24.22 19.61a5.75 5.75 0 0 1 .63 5.93 13.16 13.16 0 0 1-5 4.79c-4.37 2.7-17.18 12.84-19.54 14.66a8.32 8.32 0 0 1-6.87 1.74 5.47 5.47 0 0 1-4-5 7.62 7.62 0 0 1 .57-3.52 5.84 5.84 0 0 1 1.34-1.98zm126.43.81c2.18 3.27 1.27 7.87-2.57 9.37-4.27 1.67-8-2.09-11.07-4.4-3.81-2.83-7.55-5.73-11.35-8.57-1.72-1.29-3.48-2.48-5.25-3.71a12.08 12.08 0 0 1-4.18-4.35 5.81 5.81 0 0 1 .42-5.41c1-1.69 23.77-19.87 25.64-20.75a6.78 6.78 0 0 1 5.5-.45 6 6 0 0 1 3.43 4.08c1.29 5.07-3.31 8.09-6.93 10.53-2.08 1.41-10.21 7.81-12.27 9.48 3.42 2.33 16.62 12.48 17.46 13.11a10 10 0 0 0 1.21 1.06zM100 141.25a11 11 0 1 1-11-11 11 11 0 0 1 11 11z"/>
    </svg>
  </a><nav role="navigation" aria-label="Main navigation" class="nav">
  <ul class="list-unstyled">
      <li>
        <a href="./errors.html" class="errors">Errors
        </a>
      </li>
      <li>
        <a href="./warnings.html" class="warnings">Warnings
        </a>
      </li>
      <li>
        <a href="./obsoletes.html" class="obsolete">Obsoletes
        </a>
      </li>
      <li>
        <a href="./advices.html" class="advices">Advices
        </a>
      </li>
      <li>
        <a href="./webextension.html" class="webextension">WebExtension
        </a>
      </li>
      <li>
        <a href="./docs.html" class="sassdoc" aria-current="page"><b><abbr title="Application Programming Interface">API</abbr></b> Doc
        </a>
      </li>
      <li>
        <a href="https://github.com/ffoodd/a11y.css">On <b>Github</b><span class="sr-only">&nbsp;(external link)</span>
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" aria-hidden="true" width="10" height="10">
  <polygon fill="currentColor" points="91.875,62 85,62 85,85 15,85 15,15 38,15 38,8.125 38,0 0,0 0,100 100,100 100,62 "></polygon>
  <polygon fill="currentColor" points="54,0 54,0.627 71.787,18.477 52.701,38 38,38 38,62 62,62 62,49.799 82.773,29.462 99.374,46 100,46 100,0 "></polygon>
</svg>
        </a>
      </li>
  </ul>
</nav>
</header>


    <aside role="complementary">
      
<nav role="navigation" aria-labelledby="toc-title" id="toc">
  <p class="box-title" id="toc-title">Table of content</p>
  
    <ul class="list-unstyled">
        <li>
          <a href="#functions">Functions</a>
          <ol>
              <li>
                <a href="#Functions-message">Get translations</a>
              </li>
              <li>
                <a href="#Functions-theme-conf">Get theme configuration</a>
              </li>
              <li>
                <a href="#Functions-is-level-enough">Check level to display</a>
              </li>
              <li>
                <a href="#Functions-replace-attr">Escape attr()</a>
              </li>
          </ol>
        </li>
        <li>
          <a href="#mixins">Mixins</a>
          <ol>
              <li>
                <a href="#Mixins-set-minimum-level">Set minimum level</a>
              </li>
              <li>
                <a href="#Mixins-message">Get a message</a>
              </li>
              <li>
                <a href="#Mixins-void-tags">Extends selector with void tags</a>
              </li>
              <li>
                <a href="#Mixins-item">Set a message</a>
              </li>
              <li>
                <a href="#Mixins-error">Define an error</a>
              </li>
              <li>
                <a href="#Mixins-warning">Define a warning</a>
              </li>
              <li>
                <a href="#Mixins-obsolete">Define an obsolete thing</a>
              </li>
              <li>
                <a href="#Mixins-advice">Define an advice</a>
              </li>
              <li>
                <a href="#Mixins-disable-tests">Disable test(s)</a>
              </li>
              <li>
                <a href="#Mixins-a11y-head">Display messages in &lt;head&gt;</a>
              </li>
              <li>
                <a href="#Mixins-base-content">Display counters ::after &lt;body&gt;</a>
              </li>
              <li>
                <a href="#Mixins-a11y">Display a message</a>
              </li>
          </ol>
        </li>
        <li>
          <a href="#placeholders">Placeholders</a>
          <ol>
              <li>
                <a href="#Placeholders-messages-common-styles">Messages common styles</a>
              </li>
              <li>
                <a href="#Placeholders-messages-level-styles">Level-specific messages styles</a>
              </li>
              <li>
                <a href="#Placeholders-message-cancellation">Cancel a message</a>
              </li>
              <li>
                <a href="#Placeholders-head-children">Display &lt;head&gt; children</a>
              </li>
          </ol>
        </li>
        <li>
          <a href="#variables">Variables</a>
          <ol>
              <li>
                <a href="#Variables-themes">Themes</a>
              </li>
              <li>
                <a href="#Variables-disabled-tests">Disabled tests</a>
              </li>
              <li>
                <a href="#Variables-void-tags">Void tags</a>
              </li>
              <li>
                <a href="#Variables-file-formats">File formats</a>
              </li>
              <li>
                <a href="#Variables-interactive-elements">Interactive elements</a>
              </li>
          </ol>
        </li>
    </ul>
  
</nav>


      <div class="box hidden-sm">
        <p class="box-title">Web extensions</p>
        <ul class="list-unstyled">
          <li>
            <a href="https://addons.mozilla.org/en-GB/firefox/addon/a11ycss/" title="a11y.css Firefox add-on">
              <img src="./static/firefox.svg" width="112" height="42" alt="a11y.css Firefox add-on"/>
            </a>
          </li>
          <li>
            <a href="https://microsoftedge.microsoft.com/addons/detail/a11ycss/lkehmahcnhddkdaemngepjckgcjnidpe" title="a11y.css Edge add-on">
              <img src="./static/edge.svg" width="112" height="42" alt="a11y.css Edge add-on"/>
            </a>
          </li>
          <li>
            <a href="https://chrome.google.com/webstore/detail/a11ycss/iolfinldndiiobhednboghogkiopppid?hl=fr" title="a11y.css Chrome extension">
              <img src="./static/chrome.svg" width="119" height="42" alt="a11y.css Chrome extension"/>
            </a>
          </li>
        </ul>
      </div>
    </aside>

    <main role="main" id="content" tabindex="-1">
      
  <h1>Docs</h1>
  
          <h2 id="functions">Functions</h2>
              <article>
                <h3 id="Functions-message">Get translations</h3>
                <p>Retrieve message from translation map.</p>
<h4>Source</h4>
<div class="pre"><pre><code class="scss language-scss" data-language="Sass"><span class="token keyword">@function</span> <span class="token function">message</span><span class="token punctuation">(</span><span class="token variable">$theme</span><span class="token punctuation">,</span> <span class="token variable">$key</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token property"><span class="token variable">$message-key</span></span><span class="token punctuation">:</span> <span class="token variable">$theme</span> <span class="token operator">+</span> <span class="token string">':'</span> <span class="token operator">+</span> <span class="token variable">$key</span><span class="token punctuation">;</span>

  <span class="token keyword">@if</span> <span class="token operator">not</span> <span class="token function">map-has-key</span><span class="token punctuation">(</span><span class="token variable">$messages</span><span class="token punctuation">,</span> <span class="token variable">$message-key</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    @error <span class="token string">'No key `#​{$message-key}` found.'</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span>

  <span class="token keyword">@return</span> <span class="token function">map-get</span><span class="token punctuation">(</span><span class="token variable">$messages</span><span class="token punctuation">,</span> <span class="token variable">$message-key</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre></div>
<h4>Parameters</h4>
<table>
<thead>
<tr>
<th>Name</th>
<th>Description</th>
<th>Type</th>
<th>Default value</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>$theme</code></td>
<td>Either <code>advice</code>, <code>error</code>, <code>warning</code> or <code>obsolete</code></td>
<td><code>String</code></td>
<td>—</td>
</tr>
<tr>
<td><code>$key</code></td>
<td>Key to find message for</td>
<td><code>String</code></td>
<td>—</td>
</tr>
</tbody>
</table>
<h5>Used by </h5>
<ul>
<li><a href="#Mixins-base-content"><code>base-content()</code> mixin</a></li>
<li><a href="#Mixins-message"><code>message()</code> mixin</a></li>
</ul>
              </article>
              <article>
                <h3 id="Functions-theme-conf">Get theme configuration</h3>
                <p>Helper function to easily access a theme configuration.</p>
<h4>Source</h4>
<div class="pre"><pre><code class="scss language-scss" data-language="Sass"><span class="token keyword">@function</span> <span class="token function">theme-conf</span><span class="token punctuation">(</span><span class="token variable">$theme</span><span class="token punctuation">,</span> <span class="token variable">$key</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token keyword">@return</span> <span class="token function">map-get</span><span class="token punctuation">(</span><span class="token function">map-get</span><span class="token punctuation">(</span><span class="token variable">$themes</span><span class="token punctuation">,</span> <span class="token variable">$theme</span><span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token variable">$key</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre></div>
<h4>Parameters</h4>
<table>
<thead>
<tr>
<th>Name</th>
<th>Description</th>
<th>Type</th>
<th>Default value</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>$theme</code></td>
<td>Either <code>advice</code>, <code>error</code>, <code>warning</code> or <code>obsolete</code></td>
<td><code>String</code></td>
<td>—</td>
</tr>
<tr>
<td><code>$key</code></td>
<td>Data to get: <code>color</code>, <code>index</code> or <code>background-offset</code></td>
<td><code>String</code></td>
<td>—</td>
</tr>
</tbody>
</table>
<h4>Example</h4>
<p>Get color from error theme.</p>
<div class="pre"><pre><code class="scss language-scss" data-language="Sass"><span class="token selector">.selector </span><span class="token punctuation">{</span>
  <span class="token property">color</span><span class="token punctuation">:</span> <span class="token function">theme-conf</span><span class="token punctuation">(</span><span class="token string">'error'</span><span class="token punctuation">,</span> <span class="token string">'color'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre></div>
<div class="pre"><pre><code class="css language-css" data-language="CSS"><span class="token selector"><span class="token class">.selector</span></span> <span class="token punctuation">{</span>
  <span class="token property">color</span><span class="token punctuation">:</span> <span class="token hexcode color">#911</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre></div>
<h5>Used by</h5>
<ul>
<li><a href="#Mixins-base-content"><code>base-content()</code> mixin</a></li>
<li><a href="#Mixins-a11y"><code>a11y()</code> mixin</a></li>
<li><a href="#Placeholders-messages-level-styles"><code>%a11y-#​{$theme}</code> placeholder</a></li>
</ul>
              </article>
              <article>
                <h3 id="Functions-is-level-enough">Check level to display</h3>
                <p>Test whether <code>$level</code> is high enough to be displayed by comparing its index to <code>$minimum-level</code>'s.</p>
<h4>Source</h4>
<div class="pre"><pre><code class="scss language-scss" data-language="Sass"><span class="token keyword">@function</span> <span class="token function">is-level-enough</span><span class="token punctuation">(</span><span class="token variable">$level</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token property"><span class="token variable">$levels</span></span><span class="token punctuation">:</span> <span class="token function">map-keys</span><span class="token punctuation">(</span><span class="token variable">$themes</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token keyword">@return</span> <span class="token function">index</span><span class="token punctuation">(</span><span class="token variable">$levels</span><span class="token punctuation">,</span> <span class="token variable">$level</span><span class="token punctuation">)</span> &amp;lt<span class="token punctuation">;</span>= <span class="token function">index</span><span class="token punctuation">(</span><span class="token variable">$levels</span><span class="token punctuation">,</span> <span class="token variable">$minimum-level</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre></div>
<h4>Parameters</h4>
<table>
<thead>
<tr>
<th>Name</th>
<th>Description</th>
<th>Type</th>
<th>Default value</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>$level</code></td>
<td>Either <code>advice</code>, <code>error</code>, <code>warning</code> or <code>obsolete</code></td>
<td><code>String</code></td>
<td>—</td>
</tr>
</tbody>
</table>
<h5>Used by</h5>
<ul>
<li><a href="#Mixins-base-content"><code>base-content()</code> mixin</a></li>
<li><a href="#Mixins-item"><code>item()</code> mixin</a></li>
</ul>
              </article>
              <article>
                <h3 id="Functions-replace-attr">Escape attr()</h3>
                <p>Ensures CSS <code>attr()</code> function will render the expected value, instead of being output as a string.</p>
<h4>Source</h4>
<div class="pre"><pre><code class="scss language-scss" data-language="Sass"><span class="token keyword">@function</span> <span class="token function">replace-attr</span><span class="token punctuation">(</span><span class="token variable">$message</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token property"><span class="token variable">$has-attr</span></span><span class="token punctuation">:</span> <span class="token function">str-index</span><span class="token punctuation">(</span><span class="token variable">$message</span><span class="token punctuation">,</span> <span class="token string">'attr('</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token property"><span class="token variable">$first-paren</span></span><span class="token punctuation">:</span> <span class="token function">str-index</span><span class="token punctuation">(</span><span class="token variable">$message</span><span class="token punctuation">,</span> <span class="token string">')'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

  <span class="token keyword">@if</span> <span class="token selector">not <span class="token variable">$has-attr</span> </span><span class="token punctuation">{</span>
    <span class="token keyword">@return</span> <span class="token variable">$message</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span>

  <span class="token property"><span class="token variable">$first-chunk</span></span><span class="token punctuation">:</span> <span class="token function">str-slice</span><span class="token punctuation">(</span><span class="token variable">$message</span><span class="token punctuation">,</span> <span class="token number">1</span><span class="token punctuation">,</span> <span class="token variable">$has-attr</span> <span class="token operator">-</span> <span class="token number">1</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token property"><span class="token variable">$last-chunk</span></span><span class="token punctuation">:</span> <span class="token function">str-slice</span><span class="token punctuation">(</span><span class="token variable">$message</span><span class="token punctuation">,</span> <span class="token variable">$first-paren</span> <span class="token operator">+</span> <span class="token number">1</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

  <span class="token property"><span class="token variable">$result</span></span><span class="token punctuation">:</span> <span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

  <span class="token keyword">@if</span> <span class="token function">str-length</span><span class="token punctuation">(</span><span class="token variable">$first-chunk</span><span class="token punctuation">)</span> <span class="token selector">> 0 </span><span class="token punctuation">{</span>
    <span class="token property"><span class="token variable">$result</span></span><span class="token punctuation">:</span> <span class="token function">append</span><span class="token punctuation">(</span><span class="token variable">$result</span><span class="token punctuation">,</span> <span class="token variable">$first-chunk</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span>

  <span class="token property"><span class="token variable">$result</span></span><span class="token punctuation">:</span> <span class="token function">append</span><span class="token punctuation">(</span><span class="token variable">$result</span><span class="token punctuation">,</span> <span class="token function">unquote</span><span class="token punctuation">(</span><span class="token function">str-slice</span><span class="token punctuation">(</span><span class="token variable">$message</span><span class="token punctuation">,</span> <span class="token variable">$has-attr</span><span class="token punctuation">,</span> <span class="token variable">$first-paren</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

  <span class="token keyword">@if</span> <span class="token function">str-length</span><span class="token punctuation">(</span><span class="token variable">$last-chunk</span><span class="token punctuation">)</span> <span class="token selector">> 0 </span><span class="token punctuation">{</span>
    <span class="token property"><span class="token variable">$result</span></span><span class="token punctuation">:</span> <span class="token function">append</span><span class="token punctuation">(</span><span class="token variable">$result</span><span class="token punctuation">,</span> <span class="token function">replace-attr</span><span class="token punctuation">(</span><span class="token variable">$last-chunk</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span>

  <span class="token keyword">@return</span> <span class="token variable">$result</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre></div>
<h4>Parameters</h4>
<table>
<thead>
<tr>
<th>Name</th>
<th>Description</th>
<th>Type</th>
<th>Default value</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>$message</code></td>
<td>Message to escape</td>
<td><code>String</code></td>
<td>—</td>
</tr>
</tbody>
</table>
<h4>Example</h4>
<div class="pre"><pre><code class="scss language-scss" data-language="Sass"><span class="token selector">.selector </span><span class="token punctuation">{</span>
  <span class="token property">content</span><span class="token punctuation">:</span> <span class="token function">replace-attr</span><span class="token punctuation">(</span><span class="token string">"ARIA role attr(role) should be unique, but this one is the second!"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre></div>
<div class="pre"><pre><code class="css language-css" data-language="CSS"><span class="token selector"><span class="token class">.selector</span></span> <span class="token punctuation">{</span>
  <span class="token property">content</span><span class="token punctuation">:</span> <span class="token string">"ARIA role "</span> <span class="token function">attr</span><span class="token punctuation">(</span>role<span class="token punctuation">)</span> <span class="token string">"should be unique, but this one is the second!"</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre></div>
<h5>Used by</h5>
<ul>
<li><a href="#Mixins-message"><code>message()</code> mixin</a></li>
</ul>
              </article>
          <h2 id="mixins">Mixins</h2>
              <article>
                <h3 id="Mixins-set-minimum-level">Set minimum level</h3>
                <p>Defines the minimum level used by <code>a11y.css</code>.</p>
<p>Either:</p>
<ul>
<li><code>error</code> for errors only;</li>
<li><code>warning</code> for errors and warnings;</li>
<li><code>obsolete</code> for everything but advices;</li>
<li><code>advice</code> for everything.</li>
</ul>
<h4>Source</h4>
<div class="pre"><pre><code class="scss language-scss" data-language="Sass"><span class="token keyword">@mixin</span> <span class="token function">set-minimum-level</span><span class="token punctuation">(</span><span class="token variable">$level</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token property"><span class="token variable">$level</span></span><span class="token punctuation">:</span> <span class="token function">to-lower-case</span><span class="token punctuation">(</span><span class="token variable">$level</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token property"><span class="token variable">$levels</span></span><span class="token punctuation">:</span> <span class="token function">map-keys</span><span class="token punctuation">(</span><span class="token variable">$themes</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

  <span class="token keyword">@if</span> <span class="token operator">not</span> <span class="token function">index</span><span class="token punctuation">(</span><span class="token variable">$levels</span><span class="token punctuation">,</span> <span class="token variable">$level</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token property"><span class="token variable">$default-level</span></span><span class="token punctuation">:</span> <span class="token function">nth</span><span class="token punctuation">(</span><span class="token variable">$levels</span><span class="token punctuation">,</span> <span class="token number">-1</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token property"><span class="token variable">$level</span></span><span class="token punctuation">:</span> <span class="token variable">$default-level</span><span class="token punctuation">;</span>

    <span class="token keyword">@warn</span> <span class="token string">'Level `#​{$level}` does not exist. '</span>
      <span class="token operator">+</span> <span class="token string">'Please choose one of `#​{inspect($levels)}`. '</span>
      <span class="token operator">+</span> <span class="token string">'Falling back on `#​{$default-level}`'</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span>

  <span class="token property"><span class="token variable">$minimum-level</span></span><span class="token punctuation">:</span> <span class="token variable">$level</span> !global<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre></div>
<h4>Parameters</h4>
<table>
<thead>
<tr>
<th>Name</th>
<th>Description</th>
<th>Type</th>
<th>Default value</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>$level</code></td>
<td>Either <code>advice</code>, <code>error</code>, <code>warning</code> or <code>obsolete</code></td>
<td><code>String</code></td>
<td>—</td>
</tr>
</tbody>
</table>
<h4>Example</h4>
<div class="pre"><pre><code class="scss language-scss" data-language="Sass"><span class="token keyword">@include</span> <span class="token function">set-minimum-level</span><span class="token punctuation">(</span><span class="token string">'error'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre></div>
              </article>
              <article>
                <h3 id="Mixins-message">Get a message</h3>
                <p>Get a message from the translation map based on the defined language and output it in the <code>content</code> property.</p>
<h4>Source</h4>
<div class="pre"><pre><code class="scss language-scss" data-language="Sass"><span class="token keyword">@mixin</span> <span class="token function">message</span><span class="token punctuation">(</span><span class="token variable">$theme</span><span class="token punctuation">,</span> <span class="token variable">$key</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token property">content</span><span class="token punctuation">:</span> <span class="token function">replace-attr</span><span class="token punctuation">(</span><span class="token function">quote</span><span class="token punctuation">(</span><span class="token string">"#​{message($theme, $key)}"</span><span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token important">!important</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre></div>
<h4>Parameters</h4>
<table>
<thead>
<tr>
<th>Name</th>
<th>Description</th>
<th>Type</th>
<th>Default value</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>$theme</code></td>
<td>Either <code>advice</code>, <code>error</code>, <code>warning</code> or <code>obsolete</code></td>
<td><code>String</code></td>
<td>—</td>
</tr>
<tr>
<td><code>$key</code></td>
<td>Message name. Should match a test identifier.</td>
<td><code>String</code></td>
<td>—</td>
</tr>
</tbody>
</table>
<h4>Example</h4>
<div class="pre"><pre><code class="scss language-scss" data-language="Sass"><span class="token selector">.selector </span><span class="token punctuation">{</span>
  <span class="token keyword">@include</span> <span class="token function">message</span><span class="token punctuation">(</span><span class="token string">'advice'</span><span class="token punctuation">,</span> <span class="token string">'nav'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre></div>
<div class="pre"><pre><code class="css language-css" data-language="CSS"><span class="token selector"><span class="token class">.selector</span></span> <span class="token punctuation">{</span>
  <span class="token property">content</span><span class="token punctuation">:</span> <span class="token string">'Did you know the &amp;lt;nav> tag is exclusively restricted to primary and secondary navigation area?'</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre></div>
              </article>
              <article>
                <h3 id="Mixins-void-tags">Extends selector with void tags</h3>
                <p>Extends selector with self-closing tags &amp; replaced elements.
Notice the <code>&amp;</code> before the selector, and <code>$self-closing: true</code> argument.</p>
<h4>Source</h4>
<div class="pre"><pre><code class="scss language-scss" data-language="Sass"><span class="token keyword">@mixin</span> <span class="token selector">void-tags </span><span class="token punctuation">{</span>
  <span class="token atrule"><span class="token rule">@at-root</span> #​<span class="token punctuation">{</span><span class="token function">selector-unify</span><span class="token punctuation">(</span><span class="token variable">$void-tags</span><span class="token punctuation">,</span> &amp;<span class="token punctuation">)</span><span class="token punctuation">}</span></span> <span class="token punctuation">{</span>
    <span class="token keyword">@content</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre></div>
<h4>Example</h4>
<div class="pre"><pre><code class="scss language-scss" data-language="Sass"><span class="token selector">.selector </span><span class="token punctuation">{</span>
  <span class="token keyword">@include</span> <span class="token function">advice</span><span class="token punctuation">(</span><span class="token string">'nav'</span><span class="token punctuation">)</span>

  <span class="token keyword">@include</span> <span class="token selector">void-tags </span><span class="token punctuation">{</span>
    <span class="token keyword">@include</span> <span class="token function">advice</span><span class="token punctuation">(</span><span class="token string">'nav'</span><span class="token punctuation">,</span> <span class="token property"><span class="token variable">$self-closing</span></span><span class="token punctuation">:</span> <span class="token boolean">true</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre></div>
<div class="pre"><pre><code class="css language-css" data-language="CSS"><span class="token selector">area <span class="token class">.selector</span><span class="token punctuation">,</span> base <span class="token class">.selector</span><span class="token punctuation">,</span> br <span class="token class">.selector</span><span class="token punctuation">,</span> col <span class="token class">.selector</span><span class="token punctuation">,</span> command <span class="token class">.selector</span><span class="token punctuation">,</span> embed <span class="token class">.selector</span><span class="token punctuation">,</span> hr <span class="token class">.selector</span><span class="token punctuation">,</span> img <span class="token class">.selector</span><span class="token punctuation">,</span> input <span class="token class">.selector</span><span class="token punctuation">,</span> keygen <span class="token class">.selector</span><span class="token punctuation">,</span> link <span class="token class">.selector</span><span class="token punctuation">,</span> meta <span class="token class">.selector</span><span class="token punctuation">,</span> param <span class="token class">.selector</span><span class="token punctuation">,</span> source <span class="token class">.selector</span><span class="token punctuation">,</span> track <span class="token class">.selector</span><span class="token punctuation">,</span> wbr <span class="token class">.selector</span><span class="token punctuation">,</span> textarea <span class="token class">.selector</span><span class="token punctuation">,</span> select <span class="token class">.selector</span><span class="token punctuation">,</span> svg <span class="token class">.selector</span><span class="token punctuation">,</span> audio <span class="token class">.selector</span><span class="token punctuation">,</span> video <span class="token class">.selector</span><span class="token punctuation">,</span> iframe <span class="token class">.selector</span></span> <span class="token punctuation">{</span>
  <span class="token property">content</span><span class="token punctuation">:</span> <span class="token string">"Did you know the &amp;lt;nav> tag is exclusively restricted to primary and secondary navigation area?"</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre></div>
              </article>
              <article>
                <h3 id="Mixins-item">Set a message</h3>
                <p>Theme mixin including everything needed for the <code>$theme</code>, and checking test is not disabled.</p>
<h4>Source</h4>
<div class="pre"><pre><code class="scss language-scss" data-language="Sass"><span class="token keyword">@mixin</span> <span class="token function">item</span><span class="token punctuation">(</span><span class="token variable">$theme</span><span class="token punctuation">,</span> <span class="token variable">$key</span><span class="token punctuation">,</span> <span class="token property"><span class="token variable">$self-closing</span></span><span class="token punctuation">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span> <span class="token property"><span class="token variable">$head</span></span><span class="token punctuation">:</span> <span class="token boolean">false</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token property"><span class="token variable">$message-key</span></span><span class="token punctuation">:</span> <span class="token variable">$theme</span> <span class="token operator">+</span> <span class="token string">':'</span> <span class="token operator">+</span> <span class="token variable">$key</span><span class="token punctuation">;</span>
  <span class="token property"><span class="token variable">$is-disabled</span></span><span class="token punctuation">:</span> <span class="token function">index</span><span class="token punctuation">(</span><span class="token variable">$disabled-tests</span><span class="token punctuation">,</span> <span class="token variable">$message-key</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

  <span class="token keyword">@if</span> <span class="token function">is-level-enough</span><span class="token punctuation">(</span><span class="token variable">$theme</span><span class="token punctuation">)</span> <span class="token selector">and not <span class="token variable">$is-disabled</span> </span><span class="token punctuation">{</span>
    <span class="token keyword">@include</span> <span class="token function">a11y</span><span class="token punctuation">(</span><span class="token variable">$theme</span><span class="token punctuation">,</span> <span class="token variable">$key</span><span class="token punctuation">,</span> <span class="token variable">$self-closing</span><span class="token punctuation">,</span> <span class="token variable">$head</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre></div>
<h4>Parameters</h4>
<table>
<thead>
<tr>
<th>Name</th>
<th>Description</th>
<th>Type</th>
<th>Default value</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>$theme</code></td>
<td>Either <code>advice</code>, <code>error</code>, <code>warning</code> or <code>obsolete</code></td>
<td><code>String</code></td>
<td>—</td>
</tr>
<tr>
<td><code>$key</code></td>
<td>Key used to fetch message in <code>$messages</code> map.</td>
<td><code>String</code></td>
<td>—</td>
</tr>
<tr>
<td><code>$self-closing</code></td>
<td>Whether to use message on self or on next node.</td>
<td><code>Boolean</code></td>
<td><code>false</code></td>
</tr>
<tr>
<td><code>$head</code></td>
<td>Whether or not a self-closing tag sits in document's head.</td>
<td><code>Boolean</code></td>
<td><code>false</code></td>
</tr>
</tbody>
</table>
              </article>
              <article>
                <h3 id="Mixins-error">Define an error</h3>
                <p>Level related mixins use <code>item()</code> mixin with a hardcoded theme name.</p>
<h4>Source</h4>
<div class="pre"><pre><code class="scss language-scss" data-language="Sass"><span class="token keyword">@mixin</span> <span class="token function">error</span><span class="token punctuation">(</span><span class="token variable">$key</span><span class="token punctuation">,</span> <span class="token property"><span class="token variable">$self-closing</span></span><span class="token punctuation">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span> <span class="token property"><span class="token variable">$head</span></span><span class="token punctuation">:</span> <span class="token boolean">false</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token keyword">@include</span> <span class="token function">item</span><span class="token punctuation">(</span><span class="token string">'error'</span><span class="token punctuation">,</span> <span class="token variable">$key</span><span class="token punctuation">,</span> <span class="token variable">$self-closing</span><span class="token punctuation">,</span> <span class="token variable">$head</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre></div>
<h4>Parameters</h4>
<table>
<thead>
<tr>
<th>Name</th>
<th>Description</th>
<th>Type</th>
<th>Default value</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>$key</code></td>
<td>Key used to fetch message in <code>$messages</code> map.</td>
<td><code>String</code></td>
<td>—</td>
</tr>
<tr>
<td><code>$self-closing</code></td>
<td>Whether to use message on self or on next node.</td>
<td><code>Boolean</code></td>
<td><code>false</code></td>
</tr>
<tr>
<td><code>$head</code></td>
<td>Whether or not a self-closing tag sits in document's head.</td>
<td><code>Boolean</code></td>
<td><code>false</code></td>
</tr>
</tbody>
</table>
<h4>Example</h4>
<div class="pre"><pre><code class="scss language-scss" data-language="Sass"><span class="token selector">.selector </span><span class="token punctuation">{</span>
  <span class="token keyword">@include</span> <span class="token function">error</span><span class="token punctuation">(</span><span class="token string">"no-src"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre></div>
              </article>
              <article>
                <h3 id="Mixins-warning">Define a warning</h3>
                <p>Level related mixins use <code>item()</code> mixin with a hardcoded theme name.</p>
<h4>Source</h4>
<div class="pre"><pre><code class="scss language-scss" data-language="Sass"><span class="token keyword">@mixin</span> <span class="token function">warning</span><span class="token punctuation">(</span><span class="token variable">$key</span><span class="token punctuation">,</span> <span class="token property"><span class="token variable">$self-closing</span></span><span class="token punctuation">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span> <span class="token property"><span class="token variable">$head</span></span><span class="token punctuation">:</span> <span class="token boolean">false</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token keyword">@include</span> <span class="token function">item</span><span class="token punctuation">(</span><span class="token string">'warning'</span><span class="token punctuation">,</span> <span class="token variable">$key</span><span class="token punctuation">,</span> <span class="token variable">$self-closing</span><span class="token punctuation">,</span> <span class="token variable">$head</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre></div>
<h4>Parameters</h4>
<table>
<thead>
<tr>
<th>Name</th>
<th>Description</th>
<th>Type</th>
<th>Default value</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>$key</code></td>
<td>Key used to fetch message in <code>$messages</code> map.</td>
<td><code>String</code></td>
<td>—</td>
</tr>
<tr>
<td><code>$self-closing</code></td>
<td>Whether to use message on self or on next node.</td>
<td><code>Boolean</code></td>
<td><code>false</code></td>
</tr>
<tr>
<td><code>$head</code></td>
<td>Whether or not a self-closing tag sits in document's head.</td>
<td><code>Boolean</code></td>
<td><code>false</code></td>
</tr>
</tbody>
</table>
<h4>Example</h4>
<div class="pre"><pre><code class="scss language-scss" data-language="Sass"><span class="token selector">.selector </span><span class="token punctuation">{</span>
  <span class="token keyword">@include</span> <span class="token function">warning</span><span class="token punctuation">(</span><span class="token string">"abbr"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre></div>
              </article>
              <article>
                <h3 id="Mixins-obsolete">Define an obsolete thing</h3>
                <p>Level related mixins use <code>item()</code> mixin with a hardcoded theme name.</p>
<h4>Source</h4>
<div class="pre"><pre><code class="scss language-scss" data-language="Sass"><span class="token keyword">@mixin</span> <span class="token function">obsolete</span><span class="token punctuation">(</span><span class="token variable">$key</span><span class="token punctuation">,</span> <span class="token property"><span class="token variable">$self-closing</span></span><span class="token punctuation">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span> <span class="token property"><span class="token variable">$head</span></span><span class="token punctuation">:</span> <span class="token boolean">false</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token keyword">@include</span> <span class="token function">item</span><span class="token punctuation">(</span><span class="token string">'obsolete'</span><span class="token punctuation">,</span> <span class="token variable">$key</span><span class="token punctuation">,</span> <span class="token variable">$self-closing</span><span class="token punctuation">,</span> <span class="token variable">$head</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre></div>
<h4>Parameters</h4>
<table>
<thead>
<tr>
<th>Name</th>
<th>Description</th>
<th>Type</th>
<th>Default value</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>$key</code></td>
<td>Key used to fetch message in <code>$messages</code> map.</td>
<td><code>String</code></td>
<td>—</td>
</tr>
<tr>
<td><code>$self-closing</code></td>
<td>Whether to use message on self or on next node.</td>
<td><code>Boolean</code></td>
<td><code>false</code></td>
</tr>
<tr>
<td><code>$head</code></td>
<td>Whether or not a self-closing tag sits in document's head.</td>
<td><code>Boolean</code></td>
<td><code>false</code></td>
</tr>
</tbody>
</table>
<h4>Example</h4>
<div class="pre"><pre><code class="scss language-scss" data-language="Sass"><span class="token selector">.selector </span><span class="token punctuation">{</span>
  <span class="token keyword">@include</span> <span class="token function">obsolete</span><span class="token punctuation">(</span><span class="token string">"any"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre></div>
              </article>
              <article>
                <h3 id="Mixins-advice">Define an advice</h3>
                <p>Level related mixins use <code>item()</code> mixin with a hardcoded theme name.</p>
<h4>Source</h4>
<div class="pre"><pre><code class="scss language-scss" data-language="Sass"><span class="token keyword">@mixin</span> <span class="token function">advice</span><span class="token punctuation">(</span><span class="token variable">$key</span><span class="token punctuation">,</span> <span class="token property"><span class="token variable">$self-closing</span></span><span class="token punctuation">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span> <span class="token property"><span class="token variable">$head</span></span><span class="token punctuation">:</span> <span class="token boolean">false</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token keyword">@include</span> <span class="token function">item</span><span class="token punctuation">(</span><span class="token string">'advice'</span><span class="token punctuation">,</span> <span class="token variable">$key</span><span class="token punctuation">,</span> <span class="token variable">$self-closing</span><span class="token punctuation">,</span> <span class="token variable">$head</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre></div>
<h4>Parameters</h4>
<table>
<thead>
<tr>
<th>Name</th>
<th>Description</th>
<th>Type</th>
<th>Default value</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>$key</code></td>
<td>Key used to fetch message in <code>$messages</code> map.</td>
<td><code>String</code></td>
<td>—</td>
</tr>
<tr>
<td><code>$self-closing</code></td>
<td>Whether to use message on self or on next node.</td>
<td><code>Boolean</code></td>
<td><code>false</code></td>
</tr>
<tr>
<td><code>$head</code></td>
<td>Whether or not a self-closing tag sits in document's head.</td>
<td><code>Boolean</code></td>
<td><code>false</code></td>
</tr>
</tbody>
</table>
<h4>Example</h4>
<div class="pre"><pre><code class="scss language-scss" data-language="Sass"><span class="token selector">.selector </span><span class="token punctuation">{</span>
  <span class="token keyword">@include</span> <span class="token function">advice</span><span class="token punctuation">(</span><span class="token string">"nav"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre></div>
              </article>
              <article>
                <h3 id="Mixins-disable-tests">Disable test(s)</h3>
                <p>Disable specific tests. Each test key should match an entry in locales <code>$messages</code> map,
made of a level and a test identifier separated by a double-colon, e.g. <code>error:tab-order</code>.</p>
<h4>Source</h4>
<div class="pre"><pre><code class="scss language-scss" data-language="Sass"><span class="token keyword">@mixin</span> <span class="token function">disable-tests</span><span class="token punctuation">(</span><span class="token variable">$keys</span>...<span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token keyword">@each</span> <span class="token selector"><span class="token variable">$key</span> in <span class="token variable">$keys</span> </span><span class="token punctuation">{</span>
    <span class="token property"><span class="token variable">$disabled-tests</span></span><span class="token punctuation">:</span> <span class="token function">append</span><span class="token punctuation">(</span><span class="token variable">$disabled-tests</span><span class="token punctuation">,</span> <span class="token variable">$key</span><span class="token punctuation">)</span> !global<span class="token punctuation">;</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre></div>
<h4>Parameters</h4>
<table>
<thead>
<tr>
<th>Name</th>
<th>Description</th>
<th>Type</th>
<th>Default value</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>$keys</code></td>
<td>Keys of tests to disable.</td>
<td><code>List</code></td>
<td>—</td>
</tr>
</tbody>
</table>
<h4>Example</h4>
<div class="pre"><pre><code class="scss language-scss" data-language="Sass"><span class="token keyword">@include</span> <span class="token function">disable-tests</span><span class="token punctuation">(</span><span class="token string">'error:tab-order'</span><span class="token punctuation">,</span> <span class="token string">'advice:empty-class'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre></div>
              </article>
              <article>
                <h3 id="Mixins-a11y-head">Display messages in &lt;head&gt;</h3>
                <p>Display messages on <code>&lt;head&gt;</code>'s tags.</p>
<h4>Source</h4>
<div class="pre"><pre><code class="scss language-scss" data-language="Sass"><span class="token keyword">@mixin</span> <span class="token function">a11y-head</span><span class="token punctuation">(</span><span class="token property"><span class="token variable">$self-closing</span></span><span class="token punctuation">:</span> <span class="token boolean">false</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token comment">// Because it's in the &amp;lt;head></span>
  <span class="token keyword">@extend</span> <span class="token placeholder selector">%a11y-head</span><span class="token punctuation">;</span>

  <span class="token keyword">@if</span> <span class="token selector"><span class="token variable">$self-closing</span> </span><span class="token punctuation">{</span>
    <span class="token selector">~ link:last-of-type </span><span class="token punctuation">{</span>
      <span class="token keyword">@extend</span> <span class="token placeholder selector">%a11y-head</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre></div>
<h4>Parameters</h4>
<table>
<thead>
<tr>
<th>Name</th>
<th>Description</th>
<th>Type</th>
<th>Default value</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>$self-closing</code></td>
<td>Whether to use message on self or on last <code>&lt;link&gt;</code>.</td>
<td><code>Boolean</code></td>
<td><code>false</code></td>
</tr>
</tbody>
</table>
<h4>Example</h4>
<div class="pre"><pre><code class="scss language-scss" data-language="Sass"><span class="token selector">.selector </span><span class="token punctuation">{</span>
  <span class="token keyword">@include</span> <span class="token function">a11y-head</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre></div>
              </article>
              <article>
                <h3 id="Mixins-base-content">Display counters ::after &lt;body&gt;</h3>
                <p>Defines <code>body::after</code>’s <code>content</code> and <code>background-image</code> depending on <code>$minimum-level</code>.</p>
<h4>Source</h4>
<div class="pre"><pre><code class="scss language-scss" data-language="Sass"><span class="token keyword">@mixin</span> <span class="token function">base-content</span><span class="token punctuation">(</span><span class="token variable">$minimum-level</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token property"><span class="token variable">$background</span></span><span class="token punctuation">:</span> <span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token property"><span class="token variable">$content</span></span><span class="token punctuation">:</span> <span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

  <span class="token comment">// @note Line breaks can be triggered by «\A» within the message content.</span>
  <span class="token comment">// @see issue #7, solution from @7studio</span>
  <span class="token keyword">@each</span> <span class="token variable">$theme</span> in <span class="token function">map-keys</span><span class="token punctuation">(</span><span class="token variable">$themes</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">@if</span> <span class="token function">is-level-enough</span><span class="token punctuation">(</span><span class="token variable">$theme</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
      <span class="token property"><span class="token variable">$background-offset</span></span><span class="token punctuation">:</span> <span class="token function">theme-conf</span><span class="token punctuation">(</span><span class="token variable">$theme</span><span class="token punctuation">,</span> <span class="token string">'background-offset'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
      <span class="token property"><span class="token variable">$background-theme</span></span><span class="token punctuation">:</span>
        <span class="token color">transparent</span> <span class="token variable">$background-offset</span><span class="token punctuation">,</span>
        <span class="token function">theme-conf</span><span class="token punctuation">(</span><span class="token variable">$theme</span><span class="token punctuation">,</span> <span class="token string">'color'</span><span class="token punctuation">)</span> <span class="token variable">$background-offset</span><span class="token punctuation">,</span>
        <span class="token function">theme-conf</span><span class="token punctuation">(</span><span class="token variable">$theme</span><span class="token punctuation">,</span> <span class="token string">'color'</span><span class="token punctuation">)</span> <span class="token punctuation">(</span><span class="token variable">$background-offset</span> <span class="token operator">+</span> <span class="token number">0.2</span><span class="token unit">em</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
        <span class="token color">transparent</span> <span class="token punctuation">(</span><span class="token variable">$background-offset</span> <span class="token operator">+</span> <span class="token number">0.2</span><span class="token unit">em</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
      <span class="token property"><span class="token variable">$background</span></span><span class="token punctuation">:</span> <span class="token function">append</span><span class="token punctuation">(</span><span class="token variable">$background</span><span class="token punctuation">,</span> <span class="token variable">$background-theme</span><span class="token punctuation">,</span> <span class="token string">'comma'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
      <span class="token property"><span class="token variable">$content-theme</span></span><span class="token punctuation">:</span> <span class="token function">quote</span><span class="token punctuation">(</span><span class="token function">message</span><span class="token punctuation">(</span><span class="token string">'ui'</span><span class="token punctuation">,</span> <span class="token variable">$theme</span><span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token string">': '</span> #​<span class="token punctuation">{</span><span class="token function">counter</span><span class="token punctuation">(</span><span class="token function">unquote</span><span class="token punctuation">(</span><span class="token variable">$theme</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">}</span> <span class="token string">'\A '</span><span class="token punctuation">;</span>
      <span class="token property"><span class="token variable">$content</span></span><span class="token punctuation">:</span> <span class="token function">append</span><span class="token punctuation">(</span><span class="token variable">$content</span><span class="token punctuation">,</span> <span class="token variable">$content-theme</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
  <span class="token punctuation">}</span>

  <span class="token property">background-image</span><span class="token punctuation">:</span> <span class="token function">linear-gradient</span><span class="token punctuation">(</span>to bottom<span class="token punctuation">,</span> <span class="token color">transparent</span><span class="token punctuation">,</span> <span class="token variable">$background</span><span class="token punctuation">,</span> <span class="token color">transparent</span> <span class="token number">100</span><span class="token unit">%</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token property">content</span><span class="token punctuation">:</span> <span class="token variable">$content</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre></div>
<h4>Parameters</h4>
<table>
<thead>
<tr>
<th>Name</th>
<th>Description</th>
<th>Type</th>
<th>Default value</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>$minimum-level</code></td>
<td>Inheriting minimum level.</td>
<td><code>String</code></td>
<td>—</td>
</tr>
</tbody>
</table>
<h4>Example</h4>
<div class="pre"><pre><code class="scss language-scss" data-language="Sass"><span class="token keyword">@include</span> <span class="token function">base-content</span><span class="token punctuation">(</span><span class="token variable">$minimum-level</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre></div>
              </article>
              <article>
                <h3 id="Mixins-a11y">Display a message</h3>
                <p>Main mixin to display a message.</p>
<h4>Source</h4>
<div class="pre"><pre><code class="scss language-scss" data-language="Sass"><span class="token keyword">@mixin</span> <span class="token function">a11y</span><span class="token punctuation">(</span><span class="token variable">$theme</span><span class="token punctuation">,</span> <span class="token variable">$key</span><span class="token punctuation">,</span> <span class="token property"><span class="token variable">$self-closing</span></span><span class="token punctuation">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span> <span class="token property"><span class="token variable">$head</span></span><span class="token punctuation">:</span> <span class="token boolean">false</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token keyword">@extend</span> <span class="token placeholder selector">%a11y-</span>#​<span class="token punctuation">{</span><span class="token variable">$theme</span><span class="token punctuation">}</span><span class="token punctuation">;</span>

  <span class="token property"><span class="token variable">$base-selector</span></span><span class="token punctuation">:</span> <span class="token string">'&amp;::after'</span><span class="token punctuation">;</span>

  <span class="token keyword">@if</span> <span class="token selector"><span class="token variable">$self-closing</span> </span><span class="token punctuation">{</span>
    <span class="token property"><span class="token variable">$base-selector</span></span><span class="token punctuation">:</span> <span class="token string">'&amp; + ::before'</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span>

  <span class="token keyword">@if</span> <span class="token selector"><span class="token variable">$head</span> </span><span class="token punctuation">{</span>
    <span class="token property"><span class="token variable">$base-selector</span></span><span class="token punctuation">:</span> <span class="token string">'&amp; ~ link:last-of-type::before'</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span>

  #​<span class="token punctuation">{</span><span class="token variable">$base-selector</span><span class="token punctuation">}</span> <span class="token punctuation">{</span>
    <span class="token keyword">@extend</span> <span class="token placeholder selector">%a11y-before</span><span class="token punctuation">;</span>
    <span class="token keyword">@include</span> <span class="token function">message</span><span class="token punctuation">(</span><span class="token variable">$theme</span><span class="token punctuation">,</span> <span class="token variable">$key</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token property">background</span><span class="token punctuation">:</span> <span class="token function">theme-conf</span><span class="token punctuation">(</span><span class="token variable">$theme</span><span class="token punctuation">,</span> <span class="token string">'color'</span><span class="token punctuation">)</span> <span class="token important">!important</span><span class="token punctuation">;</span>
    <span class="token property">z-index</span><span class="token punctuation">:</span> <span class="token function">theme-conf</span><span class="token punctuation">(</span><span class="token variable">$theme</span><span class="token punctuation">,</span> <span class="token string">'index'</span><span class="token punctuation">)</span> <span class="token important">!important</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre></div>
<h4>Parameters</h4>
<table>
<thead>
<tr>
<th>Name</th>
<th>Description</th>
<th>Type</th>
<th>Default value</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>$theme</code></td>
<td>Inheriting minimum level.</td>
<td><code>String</code></td>
<td>—</td>
</tr>
<tr>
<td><code>$key</code></td>
<td>Key used to fetch message in <code>$messages</code> map.</td>
<td><code>String</code></td>
<td>—</td>
</tr>
<tr>
<td><code>$self-closing</code></td>
<td>Whether or not to use message on self or next node.</td>
<td><code>Boolean</code></td>
<td><code>false</code></td>
</tr>
<tr>
<td><code>$head</code></td>
<td>Whether or not a self-closing tag sits in document's head.</td>
<td><code>Boolean</code></td>
<td><code>false</code></td>
</tr>
</tbody>
</table>
<h4>Example</h4>
<div class="pre"><pre><code class="scss language-scss" data-language="Sass"><span class="token keyword">@include</span> <span class="token function">a11y</span><span class="token punctuation">(</span><span class="token variable">$theme</span><span class="token punctuation">,</span> <span class="token variable">$key</span><span class="token punctuation">,</span> <span class="token variable">$self-closing</span><span class="token punctuation">,</span> <span class="token variable">$head</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre></div>
              </article>
          <h2 id="placeholders">Placeholders</h2>
              <article>
                <h3 id="Placeholders-messages-common-styles">Messages common styles</h3>
                <p>Common styles for messages, mostly resetting text styles and preventing layout quirks.</p>
<h4>Source</h4>
<div class="pre"><pre><code class="scss language-scss" data-language="Sass"><span class="token selector"><span class="token placeholder">%a11y-before</span> </span><span class="token punctuation">{</span>
  <span class="token property">border-radius</span><span class="token punctuation">:</span> <span class="token number">0</span> <span class="token important">!important</span><span class="token punctuation">;</span>
  <span class="token property">color</span><span class="token punctuation">:</span> <span class="token hexcode color">#fff</span> <span class="token important">!important</span><span class="token punctuation">;</span>
  <span class="token property">contain</span><span class="token punctuation">:</span> content<span class="token punctuation">;</span>
  <span class="token property">display</span><span class="token punctuation">:</span> block <span class="token important">!important</span><span class="token punctuation">;</span>
  <span class="token property">font</span><span class="token punctuation">:</span> <span class="token number">700</span> normal <span class="token number">14</span><span class="token unit">px</span>/<span class="token number">1.5</span> sans-serif <span class="token important">!important</span><span class="token punctuation">;</span>
  <span class="token property">font-family</span><span class="token punctuation">:</span> -apple-system<span class="token punctuation">,</span> BlinkMacSystemFont<span class="token punctuation">,</span> <span class="token string">"Segoe UI"</span><span class="token punctuation">,</span> Roboto<span class="token punctuation">,</span> Oxygen-Sans<span class="token punctuation">,</span> Ubuntu<span class="token punctuation">,</span> Cantarell<span class="token punctuation">,</span> <span class="token string">"Helvetica Neue"</span><span class="token punctuation">,</span> sans-serif <span class="token important">!important</span><span class="token punctuation">;</span>
  <span class="token property">height</span><span class="token punctuation">:</span> auto <span class="token important">!important</span><span class="token punctuation">;</span>
  <span class="token property">max-width</span><span class="token punctuation">:</span> <span class="token number">100</span><span class="token unit">vw</span> <span class="token important">!important</span><span class="token punctuation">;</span>
  <span class="token property">padding</span><span class="token punctuation">:</span> <span class="token number">4</span><span class="token unit">px</span> <span class="token important">!important</span><span class="token punctuation">;</span>
  <span class="token property">pointer-events</span><span class="token punctuation">:</span> none <span class="token important">!important</span><span class="token punctuation">;</span>
  <span class="token property">position</span><span class="token punctuation">:</span> absolute <span class="token important">!important</span><span class="token punctuation">;</span>
  <span class="token property">text-decoration</span><span class="token punctuation">:</span> none <span class="token important">!important</span><span class="token punctuation">;</span>
  <span class="token property">text-shadow</span><span class="token punctuation">:</span> none <span class="token important">!important</span><span class="token punctuation">;</span>
  <span class="token property">text-transform</span><span class="token punctuation">:</span> none <span class="token important">!important</span><span class="token punctuation">;</span>
  <span class="token property">transform</span><span class="token punctuation">:</span> none <span class="token important">!important</span><span class="token punctuation">;</span>
  <span class="token property">white-space</span><span class="token punctuation">:</span> pre <span class="token important">!important</span><span class="token punctuation">;</span>
  <span class="token property">width</span><span class="token punctuation">:</span> auto <span class="token important">!important</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre></div>
<h5>Used by</h5>
<ul>
<li><a href="#Mixins-a11y"><code>a11y()</code> mixin</a></li>
</ul>
              </article>
              <article>
                <h3 id="Placeholders-messages-level-styles">Level-specific messages styles</h3>
                <p>Level-specific styles for messages, incrementing <code>counter</code> and enforcing <code>outline</code>.</p>
<h4>Source</h4>
<div class="pre"><pre><code class="scss language-scss" data-language="Sass"><span class="token keyword">@each</span> <span class="token variable">$theme</span> in <span class="token function">map-keys</span><span class="token punctuation">(</span><span class="token variable">$themes</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token placeholder selector">%a11y-</span>#​<span class="token punctuation">{</span><span class="token variable">$theme</span><span class="token punctuation">}</span> <span class="token punctuation">{</span>
    <span class="token property">counter-increment</span><span class="token punctuation">:</span> <span class="token function">unquote</span><span class="token punctuation">(</span><span class="token variable">$theme</span><span class="token punctuation">)</span> <span class="token important">!important</span><span class="token punctuation">;</span>
    <span class="token property">outline</span><span class="token punctuation">:</span> <span class="token number">4</span><span class="token unit">px</span> solid <span class="token function">theme-conf</span><span class="token punctuation">(</span><span class="token variable">$theme</span><span class="token punctuation">,</span> <span class="token string">'color'</span><span class="token punctuation">)</span> <span class="token important">!important</span><span class="token punctuation">;</span>
    <span class="token property">outline-offset</span><span class="token punctuation">:</span> <span class="token number">-4</span><span class="token unit">px</span> <span class="token important">!important</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre></div>
<h5>Used by</h5>
<ul>
<li><a href="#Mixins-a11y"><code>a11y()</code> mixin</a></li>
</ul>
              </article>
              <article>
                <h3 id="Placeholders-message-cancellation">Cancel a message</h3>
                <p>Provides a way to cancel a message by resetting its core properties.</p>
<h4>Source</h4>
<div class="pre"><pre><code class="scss language-scss" data-language="Sass"><span class="token selector"><span class="token placeholder">%a11y-reset</span> </span><span class="token punctuation">{</span>
  <span class="token property">counter-increment</span><span class="token punctuation">:</span> none <span class="token important">!important</span><span class="token punctuation">;</span>
  <span class="token property">outline</span><span class="token punctuation">:</span> <span class="token number">0</span> <span class="token important">!important</span><span class="token punctuation">;</span>

  <span class="token selector"><span class="token parent important">&amp;</span>::after,
  <span class="token parent important">&amp;</span> + ::before </span><span class="token punctuation">{</span>
    <span class="token property">content</span><span class="token punctuation">:</span> <span class="token string">''</span> <span class="token important">!important</span><span class="token punctuation">;</span>
    <span class="token property">display</span><span class="token punctuation">:</span> none <span class="token important">!important</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre></div>
<h5>Used by</h5>
<ul>
<li><a href="/advices.html#missing-role">Missing <code>[role="search"]</code> advice</a></li>
<li><a href="/advices.html#placeholder"><code>[placeholder]</code> can't replace a <code>label</code> advice</a></li>
<li><a href="/warnings.html#empty-nodes">Most of DOM nodes shouldn't be <code>:empty</code> warning</a></li>
<li><a href="/errors.html#not-form-button">Form <code>button</code> error</a></li>
<li><a href="/errors.html#radio-group"><code>[type="radio"]</code> outside a <code>fieldset</code> error</a></li>
</ul>
              </article>
              <article>
                <h3 id="Placeholders-head-children">Display &lt;head&gt; children</h3>
                <p>Displays elements in <code>&lt;head&gt;</code>, to allow their messages to appear.</p>
<h4>Source</h4>
<div class="pre"><pre><code class="scss language-scss" data-language="Sass"><span class="token selector"><span class="token placeholder">%a11y-head</span> </span><span class="token punctuation">{</span>
  <span class="token property">display</span><span class="token punctuation">:</span> block <span class="token important">!important</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre></div>
<h5>Used by</h5>
<ul>
<li><a href="#Mixins-a11y-head"><code>a11y-head()</code> mixin</a></li>
</ul>
              </article>
          <h2 id="variables">Variables</h2>
              <article>
                <h3 id="Variables-themes">Themes</h3>
                <p>This map holds configuration for all themes. Each theme has an icon, a color and a z-index, and a background offset.</p>
<h4>Source</h4>
<div class="pre"><pre><code class="scss language-scss" data-language="Sass"><span class="token property"><span class="token variable">$themes</span></span><span class="token punctuation">:</span> <span class="token punctuation">(</span>
  <span class="token string">'error'</span><span class="token punctuation">:</span> <span class="token punctuation">(</span>
    <span class="token string">'color'</span><span class="token punctuation">:</span> <span class="token hexcode color">#d90b0b</span><span class="token punctuation">,</span>
    <span class="token string">'index'</span><span class="token punctuation">:</span> <span class="token number">2147483647</span><span class="token punctuation">,</span>
    <span class="token string">'background-offset'</span><span class="token punctuation">:</span> <span class="token number">1.4</span><span class="token unit">em</span>
  <span class="token punctuation">)</span><span class="token punctuation">,</span>
  <span class="token string">'warning'</span><span class="token punctuation">:</span> <span class="token punctuation">(</span>
    <span class="token string">'color'</span><span class="token punctuation">:</span> <span class="token hexcode color">#f50</span><span class="token punctuation">,</span>
    <span class="token string">'index'</span><span class="token punctuation">:</span> <span class="token number">2147483646</span><span class="token punctuation">,</span>
    <span class="token string">'background-offset'</span><span class="token punctuation">:</span> <span class="token number">2.9</span><span class="token unit">em</span>
  <span class="token punctuation">)</span><span class="token punctuation">,</span>
  <span class="token string">'obsolete'</span><span class="token punctuation">:</span> <span class="token punctuation">(</span>
    <span class="token string">'color'</span><span class="token punctuation">:</span> <span class="token color">royalblue</span><span class="token punctuation">,</span>
    <span class="token string">'index'</span><span class="token punctuation">:</span> <span class="token number">2147483645</span><span class="token punctuation">,</span>
    <span class="token string">'background-offset'</span><span class="token punctuation">:</span> <span class="token number">4.4</span><span class="token unit">em</span>
  <span class="token punctuation">)</span><span class="token punctuation">,</span>
  <span class="token string">'advice'</span><span class="token punctuation">:</span> <span class="token punctuation">(</span>
    <span class="token string">'color'</span><span class="token punctuation">:</span> <span class="token color">green</span><span class="token punctuation">,</span>
    <span class="token string">'index'</span><span class="token punctuation">:</span> <span class="token number">2147483644</span><span class="token punctuation">,</span>
    <span class="token string">'background-offset'</span><span class="token punctuation">:</span> <span class="token number">5.9</span><span class="token unit">em</span>
  <span class="token punctuation">)</span><span class="token punctuation">,</span>
<span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre></div>
<h4>Map structure</h4>
<table>
<thead>
<tr>
<th>Name</th>
<th>Description</th>
<th>Type</th>
<th>Value</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>theme</code></td>
<td>—</td>
<td><code>Map</code></td>
<td>—</td>
</tr>
<tr>
<td><code>theme.color</code></td>
<td>Theme color</td>
<td><code>Color</code></td>
<td>—</td>
</tr>
<tr>
<td><code>theme.index</code></td>
<td>Theme <code>z-index</code></td>
<td><code>Number</code></td>
<td>—</td>
</tr>
<tr>
<td><code>theme.background-offset</code></td>
<td>Theme <code>background-offset</code></td>
<td><code>Length</code></td>
<td>—</td>
</tr>
</tbody>
</table>
<h4>Used by</h4>
<ul>
<li><a href="#Mixins-set-minimum-level"><code>set-minimum-level()</code> mixin</a></li>
<li><a href="#Mixins-base-content"><code>base-content()</code> mixin</a></li>
</ul>
              </article>
              <article>
                <h3 id="Variables-disabled-tests">Disabled tests</h3>
                <p>Map of disabled tests, referred by their key.</p>
<h4>Source</h4>
<div class="pre"><pre><code class="scss language-scss" data-language="Sass"><span class="token property"><span class="token variable">$disabled-tests</span></span><span class="token punctuation">:</span> <span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre></div>
<h5>Used by</h5>
<ul>
<li><a href="#Mixins-disable-tests"><code>disable-tests()</code> mixin</a></li>
</ul>
              </article>
              <article>
                <h3 id="Variables-void-tags">Void tags</h3>
                <p>Every HTML tag that do not allow generated content through pseudo-elements.</p>
<h4>Source</h4>
<div class="pre"><pre><code class="scss language-scss" data-language="Sass"><span class="token property"><span class="token variable">$void-tags</span></span><span class="token punctuation">:</span> area<span class="token punctuation">,</span> base<span class="token punctuation">,</span> br<span class="token punctuation">,</span> col<span class="token punctuation">,</span> command<span class="token punctuation">,</span> embed<span class="token punctuation">,</span> hr<span class="token punctuation">,</span> img<span class="token punctuation">,</span> input<span class="token punctuation">,</span> keygen<span class="token punctuation">,</span> link<span class="token punctuation">,</span> meta<span class="token punctuation">,</span> param<span class="token punctuation">,</span> source<span class="token punctuation">,</span> track<span class="token punctuation">,</span> wbr<span class="token punctuation">,</span> textarea<span class="token punctuation">,</span> select<span class="token punctuation">,</span> svg<span class="token punctuation">,</span> audio<span class="token punctuation">,</span> video<span class="token punctuation">,</span> iframe<span class="token punctuation">;</span>
</code></pre></div>
<h5>Used by</h5>
<ul>
<li><a href="#Mixins-void-tags"><code>void-tags()</code> mixin</a></li>
</ul>
<h5>References</h5>
<ul>
<li><a href="https://thenewcode.com/461/What-The-Heck-Is-A-Replaced-Element">https://thenewcode.com/461/What-The-Heck-Is-A-Replaced-Element</a></li>
<li><a href="https://la-cascade.io/articles/quest-ce-quun-element-remplace">https://la-cascade.io/articles/quest-ce-quun-element-remplace</a></li>
</ul>
              </article>
              <article>
                <h3 id="Variables-file-formats">File formats</h3>
                <p>File formats used in a few selectors.</p>
<h4>Source</h4>
<div class="pre"><pre><code class="scss language-scss" data-language="Sass"><span class="token property"><span class="token variable">$formats</span></span><span class="token punctuation">:</span> pdf<span class="token punctuation">,</span> doc<span class="token punctuation">,</span> png<span class="token punctuation">,</span> jpg<span class="token punctuation">,</span> gif<span class="token punctuation">,</span> ics<span class="token punctuation">,</span> mp3<span class="token punctuation">,</span> mp4<span class="token punctuation">,</span> mov<span class="token punctuation">,</span> ogg<span class="token punctuation">,</span> xls<span class="token punctuation">,</span> txt<span class="token punctuation">,</span> zip<span class="token punctuation">,</span> rar<span class="token punctuation">,</span> docx<span class="token punctuation">,</span> webp<span class="token punctuation">,</span> apng<span class="token punctuation">,</span> svg<span class="token punctuation">,</span> svgz<span class="token punctuation">;</span>
</code></pre></div>
<h5>Used by</h5>
<ul>
<li><a href="/advices.html#file-format">"Linking to a file" advice</a></li>
<li><a href="/warnings.html#filename-alt">"<code>[alt]</code> containing file name" warning</a></li>
</ul>
              </article>
              <article>
                <h3 id="Variables-interactive-elements">Interactive elements</h3>
                <p>Tags used in some selectors.</p>
<h4>Source</h4>
<div class="pre"><pre><code class="scss language-scss" data-language="Sass"><span class="token property"><span class="token variable">$interactive</span></span><span class="token punctuation">:</span> <span class="token string">'a[href]'</span><span class="token punctuation">,</span> <span class="token string">'audio[controls]'</span><span class="token punctuation">,</span> <span class="token string">'video[controls]'</span><span class="token punctuation">,</span> <span class="token string">'button'</span><span class="token punctuation">,</span> <span class="token string">'details'</span><span class="token punctuation">,</span> <span class="token string">'embed'</span><span class="token punctuation">,</span> <span class="token string">'iframe'</span><span class="token punctuation">,</span> <span class="token string">'img[usemap]'</span><span class="token punctuation">,</span> <span class="token string">'label'</span><span class="token punctuation">,</span> <span class="token string">'select'</span><span class="token punctuation">,</span> <span class="token string">'textarea'</span><span class="token punctuation">,</span> <span class="token string">'input[type]:not([hidden])'</span><span class="token punctuation">;</span>
</code></pre></div>
<h5>Used by</h5>
<ul>
<li><a href="/errors.html#nested-interactive">"Nested interactive elements" error</a></li>
</ul>
<h5>References</h5>
<ul>
<li><a href="https://html.spec.whatwg.org/multipage/dom.html#non-conforming-featuresdom.html#interactive-content-2">https://html.spec.whatwg.org/multipage/dom.html#non-conforming-featuresdom.html#interactive-content-2</a></li>
</ul>
              </article>

      
    </main>
    <footer role="contentinfo">
  <p class="builtWith box">
      Built with
      <a href="https://www.11ty.dev/">
        Eleventy
        <span class="sr-only">&nbsp;(external link)</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" aria-hidden="true" width="10" height="10">
  <polygon fill="currentColor" points="91.875,62 85,62 85,85 15,85 15,15 38,15 38,8.125 38,0 0,0 0,100 100,100 100,62 "></polygon>
  <polygon fill="currentColor" points="54,0 54,0.627 71.787,18.477 52.701,38 38,38 38,62 62,62 62,49.799 82.773,29.462 99.374,46 100,46 100,0 "></polygon>
</svg>-
      </a>
      and supported by
      <a href="https://www.jetbrains.com/?from=a11y.css">
        JetBrains
        <span class="sr-only">&nbsp;(external link)</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" aria-hidden="true" width="10" height="10">
  <polygon fill="currentColor" points="91.875,62 85,62 85,85 15,85 15,15 38,15 38,8.125 38,0 0,0 0,100 100,100 100,62 "></polygon>
  <polygon fill="currentColor" points="54,0 54,0.627 71.787,18.477 52.701,38 38,38 38,62 62,62 62,49.799 82.773,29.462 99.374,46 100,46 100,0 "></polygon>
</svg>
      </a>
    </p>
    <div>
      <p>® 2014 —&nbsp;2023 <strong>Gaël Poupard</strong></p>
      <p>This project is distributed under license <a href="https://opensource.org/license/mit/">MIT</a> and <a href="https://creativecommons.org/licenses/by/3.0/">CC BY 3.0</a>. <a href="#skip-links">Back to top</a></p>
    </div>
</footer>

    <script src="./static/docs.js?v=1690620346343"></script>
  </body>
</html>
